<script setup lang="ts">
import useVModel from '../utils/useVModel'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['update:modelValue'])

const model = useVModel(props, 'modelValue', emit)

const likesList = ['玩游戏', '看电影', '打篮球', '踢足球', '写代码', '读书']
</script>

<template>
  <div class="user-info-box">
    <h1>填写您的个人信息</h1>
    <div class="info-chunk">
      <label class="label" for="username">姓名</label>
      <input
        v-model="model.username"
        id="username"
        type="text"
        autocomplete="off"
      />
    </div>
    <div class="info-chunk">
      <span class="label">是否成年</span>
      <input
        v-model="model.isAdult"
        type="radio"
        name="isAdult"
        id="yes"
        value="1"
      />
      <label for="yes">是</label>
      <input
        v-model="model.isAdult"
        type="radio"
        id="no"
        name="isAdult"
        value="2"
      />
      <label for="no">否</label>
    </div>
    <div class="info-chunk">
      <label class="label">爱好</label>
      <div class="loves">
        <label v-for="option in likesList" :key="option">
          <input type="checkbox" :value="option" v-model="modelValue.likes" />
          {{ option }}
        </label>
      </div>
    </div>
  </div>
</template>

<style scoped>
.info-chunk {
  display: flex;
  margin-top: 18px;
  user-select: none;
}

.user-info-box .label {
  width: 80px;
  display: inline-block;
}

.loves {
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>
